/* eslint-disable curly */
<template>
  <div>
    <el-drawer
      size="500px"
      title="我是标题"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <div class="formdm">
        <el-form
          :model="formData"
          :rules="rules"
          ref="formData"
          label-width="100px"
          class="demo-formData"
        >
          <el-form-item label="活动名称" prop="name">
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
          <el-form-item label="活动区域" prop="region">
            <el-select v-model="formData.region" placeholder="请选择活动区域">
              <el-option label="区域一" value="shanghai"></el-option>
              <el-option label="区域二" value="beijing"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="活动时间" required>
            <el-col :span="11">
              <el-form-item prop="date1">
                <el-date-picker
                  type="date"
                  placeholder="选择日期"
                  v-model="formData.date1"
                  style="width: 100%"
                ></el-date-picker>
              </el-form-item>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-form-item prop="date2">
                <el-time-picker
                  placeholder="选择时间"
                  v-model="formData.date2"
                  style="width: 100%"
                ></el-time-picker>
              </el-form-item>
            </el-col>
          </el-form-item>
          <el-form-item label="即时配送" prop="delivery">
            <el-switch v-model="formData.delivery"></el-switch>
          </el-form-item>
          <el-form-item label="活动性质" prop="type">
            <el-checkbox-group v-model="formData.type">
              <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>
              <el-checkbox label="地推活动" name="type"></el-checkbox>
              <el-checkbox label="线下主题活动" name="type"></el-checkbox>
              <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="特殊资源" prop="resource">
            <el-radio-group v-model="formData.resource">
              <el-radio label="线上品牌商赞助"></el-radio>
              <el-radio label="线下场地免费"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="活动形式" prop="desc">
            <el-input type="textarea" v-model="formData.desc"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('formData')"
              >立即创建</el-button
            >
            <el-button @click="resetForm('formData')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>
<script>
// import { getInfo, setUpdate, add } from '@servers/text';
export default {
  props: {
    //是否开启抽屉
    drawer: {
      type: Boolean,
      default: () => false
    }
  },
  data() {
    return {
      //抽屉打开方向
      direction: 'rtl',
      //表单字段
      formData: {
        id: '', //
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      //表单校验
      rules: {
        name: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        date1: [
          {
            type: 'date',
            required: true,
            message: '请选择日期',
            trigger: 'change'
          }
        ],
        date2: [
          {
            type: 'date',
            required: true,
            message: '请选择时间',
            trigger: 'change'
          }
        ],
        type: [
          {
            type: 'array',
            required: true,
            message: '请至少选择一个活动性质',
            trigger: 'change'
          }
        ],
        resource: [
          { required: true, message: '请选择活动资源', trigger: 'change' }
        ],
        desc: [{ required: true, message: '请填写活动形式', trigger: 'blur' }]
      }
    };
  },
  created() {
    //修改时获取详情
    this.Info();
  },
  methods: {
    //抽屉框关闭操作
    handleClose() {
      this.$confirm('你确定要关闭吗？')
        .then(() => {
          // 动画关闭需要一定的时间
          this.$emit('handleClose');
        })
        .catch(() => {});
    },
    Info() {
      const { id } = this.$route.query;
      if (id) {
        this.setInfo(id);
      }
    },
    //获取详情
    async setInfo(id) {
      console.log(id);
      // const res = await getInfo(id);
      // if (res && res.success) {
      //   this.formData = res.data || {};
      // } else {
      //   this.$message.error(res.errorMsg);
      // }
    },
    //修改请求
    async setUpdate() {
      // const { formData } = this;
      // const res = await setUpdate({ ...formData });
      // if (res && res.success) {
      //   this.$message.success('操作成功');
      //   //查询获取列表
      //   this.$emit('getList');
      //   //关闭父组件编辑弹框
      //   this.$emit('handleClose');
      // } else {
      //   this.$message.error(res.errorMsg);
      // }
    },
    //新增接口请求
    async setAdd() {
      // const { formData } = this;
      // const res = await add({ ...formData });
      // if (res && res.success) {
      //   this.$message.success('操作成功');
      //   //查询获取列表
      //   this.$emit('getList');
      //   //关闭父组件编辑弹框
      //   this.$emit('handleClose');
      // } else {
      //   this.$message.error(res.errorMsg);
      // }
    },
    //表单校验
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        const { id } = this.formData;
        if (valid) {
          if (id) {
            //修改
            this.setUpdate();
          } else {
            //新增
            this.setAdd();
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>
<style lang="scss" scoped>
.formdm {
  margin: 0 12px;
}
</style>
